class Video extends Phaser.Scene {

    constructor() {
        super({
            key: 'Video'
        });
    }

    preload() {
        this.load.video('video1', './assets/中华蜜蜂介绍.mp4');
    }

    create() {
        console.log('scene Video create.');
        const {
            width,
            height
        } = game.config;
        // this.video = this.add.video(0, 0, 'video1');
        // this.video.setOrigin(0, 0).setScale(width / this.video.width, height / this.video.height);
        // this.video
        //     .setInteractive()
        //     .on('pointerdown', function (pointer) {
        //         // 此this为 (this.video自己)
        //         this.isPlaying() ? this.setPaused(true) : this.play();
        //         // this.setPaused(this.isPlaying())
        //     })
        //     .on('play', function (video) {
        //         console.log('play');
        //     })
        //     .on('loop', function (video) {
        //         console.log('loop');
        //     })
        //     .on('complete', function (video) {
        //         console.log('complete');
        //     })
        // graphics
        var graphics = this.add.graphics({
            lineStyle: {
                width: 4,
                color: 0xaa00aa
            },
            fillStyle: {
                color: 0xffd46b,
                alpha: 1
            },
        });
        // graphics.strokeRect(20, 50, 300, 300);
        // graphics.fillRect(20, 500, 300, 300);
        // #ffd46b
        graphics.fillStyle(0xf5f5f5, 0.9);
        const barBody = graphics.fillRoundedRect(0.15 * width, height - 80, width * 0.7, 32, 0);
        // const gg = graphics.fillRoundedRect(0.15 * width, height - 50, width * 0.7, 16, 8);
        // container的origin为（0,0）
        const circleButtonContainer = this.add.container(0.15 * width, height - 80).setSize(32, 32);
        circleButtonContainer.add(this.add.circle(0, 0, 16, 0xaa00aa).setOrigin(0, 0)); // 添加大圆圈
        circleButtonContainer.add(this.add.circle(16, 16, 8, 0x00FFFF)); // 添加内圆圈
        const cover = this.add.circle(0, 0, 16, 0xFFFFFF).setOrigin(0, 0).setAlpha(0); // 生成外罩，方便接收拖动事件
        circleButtonContainer.add(cover);
        enableDragCircleButton(cover, circleButtonContainer);
    }


    update() {

    }
}

//  设置target在移动端和电脑端拖动
//  target 为gameObject;
function enableDragCircleButton(cover, container) {
    // 记录原始位置，用来弹回
    container.originPos = {
        x: buttonContainer.x,
        y: buttonContainer.y
    };
    cover
        .setInteractive()
        .on('pointerdown', function(pointer) {
            this.containerCurPos = {
                x: container.x,
                y: container.y
            };
        })
        .on('pointermove', function(pointer) {
            this.containerCurPos && this.setPosition(this.containerCurPos.x + pointer.x - pointer.downX, this.containerCurPos.y);
        })
        .on('pointerup', function(pointer) {
            if (this.containerCurPos) {
                this.containerCurPos = null;
            }
        })
        .on('pointerout', function(pointer) {
            if (this.containerCurPos) {
                this.containerCurPos = null;
            }
        })
    return target
}